<template>
  <div class="dashboard-container">
    <el-row :gutter="6">
      <el-col :span="20">
        <div style="width:100%">
          <div v-for="(card,index) in cards" :key="index" style=" display: inline-block;width:20%">
            <!-- 固定资产统计（全局） -->
            <div v-if="card === 'FixedAssetStatsCard'" class="padding-0-4">
              <FixedAssetStatsCard :key="card + timerflag" categories="1" />
            </div>
            <!-- 固定资产统计（科技） -->
            <div v-if="card === 'FixedAssetStatsCardKJ'" class="padding-0-4">
              <FixedAssetStatsCardKJ :key="card + timerflag" belongs="kj" categories="1" />
            </div>
            <!-- 固定资产统计（总行） -->
            <div v-if="card === 'FixedAssetStatsCardSL'" class="padding-0-4">
              <FixedAssetStatsCardKJ :key="card + timerflag" belongs="sl" categories="1" />
            </div>
            <!-- 低值易耗品统计（全局） -->
            <div v-if="card === 'LowvalueGoodsStatsCard'" class="padding-0-4">
              <FixedAssetStatsCard :key="card + timerflag" categories="2" name="低值易耗品" icon="lowervaluegoods" />
            </div>
            <!-- 低值易耗品统计（科技） -->
            <div v-if="card === 'LowvalueGoodsStatsCardKJ'" class="padding-0-4">
              <FixedAssetStatsCardKJ :key="card + timerflag" belongs="kj" categories="2" name="低值易耗品" icon="lowervaluegoods" />
            </div>
            <!-- 低值易耗品统计（总行） -->
            <div v-if="card === 'LowvalueGoodsStatsCardSL'" class="padding-0-4">
              <FixedAssetStatsCardKJ :key="card + timerflag" belongs="sl" categories="2" name="低值易耗品" icon="lowervaluegoods" />
            </div>
            <!-- 我的工单统计 -->
            <div v-if="card === 'MeWorkorderStatsCard'" class="padding-0-4">
              <MeWorkorderStatsCard :key="card + timerflag" status="me" name="我的工单" icon="todo" />
            </div>
            <!-- 待办工单统计 -->
            <div v-if="card === 'TodoWorkorderStatsCard'" class="padding-0-4">
              <TodoWorkorderStatsCard :key="card + timerflag" status="todo" name="待办工单" icon="todo" />
            </div>
            <!-- 已办工单统计 -->
            <div v-if="card === 'DoneWorkorderStatsCard'" class="padding-0-4">
              <DoneWorkorderStatsCard :key="card + timerflag" status="done" name="已办工单" icon="info" />
            </div>
          </div>
          <FixedTodoTasks :key="'FixedTodoTasks' + timerflag" @reload="onCloseNewOrderForm" />
        </div>
      </el-col>
      <el-col :span="4">
        <el-card shadow="never" class="oneCard card-h-100">
          <!-- 时间 -->
          <div class="never_rigth">
            <div />
            <div class="never_time never_text">
              {{ currentTime.time }}
            </div>
            <div style="" class="never_text">
              {{ currentTime.date }}
            </div>
            <div class="never_text">
              {{ currentTime.week }}
            </div>
          </div>

          <!-- 快捷入口 -->
          <div class="never_main  margin-top-10">
            <div />
            <div v-if="currentKey === 'sl'" style="width:100%;" class="padding-bottom-10 font-size-20 font-weight border-bottom-solid never_text" @click="entryClick('kj')">
              总行入口
            </div>
            <div v-if="currentKey === 'kj'" style="width:100%;" class="padding-bottom-10 font-size-20 font-weight border-bottom-solid never_text" @click="entryClick('sl')">
              中心入口
            </div>
            <div v-for="(quick,index) in quickEntrys[currentKey]" :key="index" style="width:100%;" class="padding-bottom-10 font-size-15 border-bottom-dashed margin-top-10 never_text">
              <!-- <router-link class="icon_div" :to="{name:quick.rootName}">
                <svg-icon class="icon_svg" :icon-class="quick.icon" />{{ quick.name }}
              </router-link> -->
              <a class="icon_div" @click="openWorkorderForm(quick.orderType)">
                <svg-icon class="icon_svg" :icon-class="quick.icon" />{{ quick.name }}
              </a>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <InitWorkorderForm v-if="workorderFormVisible" :form-key="formKey" :work-order-type="workOrderType" @cancelNewOrderForm="onCloseNewOrderForm" />
  </div>
</template>

<script>
import moment from 'moment'

// 固定资产统计
import FixedAssetStatsCard from './components/cards/assetStats'
import FixedAssetStatsCardKJ from './components/cards/assetStats'
// import FixedAssetStatsCardSL from './components/cards/assetStats'
// 低值易耗品统计
// import LowvalueGoodsStatsCard from './components/cards/assetStats'
// import LowvalueGoodsStatsCardKJ from './components/cards/assetStats'
// import LowvalueGoodsStatsCardSL from './components/cards/assetStats'
// 待办工单统计
import TodoWorkorderStatsCard from './components/cards/workorderStats'
// 已办工单统计
import DoneWorkorderStatsCard from './components/cards/workorderStats'
// 我工单统计
import MeWorkorderStatsCard from './components/cards/workorderStats'

// // 消耗品统计
// import Card3 from './components/cards/assetStats'
// // 个人资产统计
// import Card4 from './components/cards/assetStats'
// // 待办工单统计
// import Card5 from './components/cards/assetStats'
// // 已办工单统计
// import Card6 from './components/cards/assetStats'

import FixedTodoTasks from './components/fixed/todoTasks'
import InitWorkorderForm from '@neu/dcam-ui/views/workOrder/components/initForm'
import { AUTHORITY as cardAuthority } from '@neu/dcam-ui/utils/constants'

export default {
  name: 'Personalworkbench',
  components: {
    FixedAssetStatsCard,
    FixedAssetStatsCardKJ,
    // FixedAssetStatsCardSL,
    // LowvalueGoodsStatsCard,
    // LowvalueGoodsStatsCardKJ,
    // LowvalueGoodsStatsCardSL,
    TodoWorkorderStatsCard,
    DoneWorkorderStatsCard,
    MeWorkorderStatsCard,
    FixedTodoTasks,
    InitWorkorderForm
  },
  data() {
    return {
      // 当前时间
      currentTime: {
        time: '',
        date: '',
        week: ''
      },
      // 定时器
      timer: null,
      // 当前登录的角色
      myRoles: this.$store.getters.roles || [],
      active: '',
      workorderFormVisible: false,
      workOrderType: '',
      formKey: '',
      timerflag: Date.now(),
      tab: ''
    }
  },
  computed: {
    // 卡片
    cards: function() {
      // 判断当前用户的角色
      const roles = this.myRoles
      const shows = [[]]
      let ii = 0
      roles.forEach(element => {
        shows[ii] = cardAuthority[element] ? cardAuthority[element].card : []
        ii++
      })
      ii = 0
      let maxlength = 0
      let maxlengthIndex = 0
      for (;ii < shows.length; ii++) {
        if (maxlength < shows[ii].length) {
          maxlength = shows[ii].length
          maxlengthIndex = ii
        }
      }
      return shows[maxlengthIndex]
    },
    // 快捷入口
    quickEntrys: function() {
      // 判断当前用户的角色
      const roles = this.myRoles
      const shows = []
      roles.forEach(e => {
        const roleShows = cardAuthority[e] ? cardAuthority[e].quickEntry : []
        roleShows.forEach(i => {
          if (shows.findIndex(s => s.orderType === i.orderType) === -1) {
            shows.push(i)
          }
        })
      })
      return {
        'kj': shows.filter(l => l.type === 'kj'),
        'sl': shows.filter(l => l.type === 'sl')
      }
    },
    currentKey: {
      get: function() {
        if (this.tab) {
          return this.tab
        }
        const roles = this.myRoles
        console.log(roles)
        const shows = []
        roles.forEach(e => {
          const roleShows = cardAuthority[e] ? cardAuthority[e].quickEntry : []
          roleShows.forEach(i => {
            if (shows.findIndex(s => s.orderType === i.orderType) === -1) {
              shows.push(i.type)
            }
          })
        })
        return shows.includes('kj') ? 'kj' : 'sl'
      },
      set: function(newVal) {
        this.tab = newVal
      }
    }
  },
  mounted() {
    const that = this
    that.getCurrentTime()
    that.timer = setInterval(function() {
      that.getCurrentTime()
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    // 获取当前时间
    getCurrentTime() {
      const that = this
      that.currentTime.time = moment().format('HH:mm:ss')
      that.currentTime.date = moment().format('YYYY年MM月DD日')
      const week = moment().day()
      switch (week) {
        case 1:
          that.currentTime.week = '星期一'
          break
        case 2:
          that.currentTime.week = '星期二'
          break
        case 3:
          that.currentTime.week = '星期三'
          break
        case 4:
          that.currentTime.week = '星期四'
          break
        case 5:
          that.currentTime.week = '星期五'
          break
        case 6:
          that.currentTime.week = '星期六'
          break
        case 0:
          that.currentTime.week = '星期日'
          break
      }
    },
    defaultTab() {
      const roles = this.myRoles
      let shows = []
      roles.forEach(element => {
        shows = cardAuthority[element] ? cardAuthority[element].task : []
      })
      return shows[0] ? shows[0].code : ''
    },
    openWorkorderForm(workOrderType) {
      this.workorderFormVisible = true
      this.workOrderType = workOrderType
    },
    onCloseNewOrderForm() {
      this.workorderFormVisible = false
      this.timerflag = Date.now()
    },
    entryClick(key) {
      if (this.quickEntrys[key].length !== 0) {
        this.currentKey = key
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.justify-content{
  justify-content: center;
}
.card-h-100 {
    height: calc(100vh - 75px);
    overflow: auto;
}
.card-h-80 {
    height: calc(100vh - 174px);
    overflow: auto;
}
.never_rigth{
    padding: 18px 0;
    box-sizing: border-box;
    margin:0 -20px;
    border-bottom:1px solid #e6ebf5;
    height: 127px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;;
}
.never_main{
    padding: 16px 33px;
    box-sizing: border-box;
    margin:0 -10px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;;
}
.border-bottom-solid{
  border-bottom: 2px solid #e6ebf5
}
.border-bottom-dashed{
  border-bottom: 2px dashed #e6ebf5
}
.never_time{
  font-size: 33px;
  font-weight: bold;
  padding-bottom:10px;
}
.padding-bottom-10{
  padding-bottom:10px;
}
.font-size-20{
  font-size: 20px;
}
.font-size-15{
  font-size: 15px;
}
.font-weight{
  font-weight: bold;
}
.never_text{
    width: 100%;
    text-align: center;
}
.padding-0-4{
  padding: 0px 4px
}
.margin-top-10{
  margin-top: 10px
}
.icon_div{
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px 0;
  justify-content: center;
}
.icon_svg{
  width: 1.5em;
  height: 1.5em;
  margin-right: 10px;
  font-size: 24px !important;
  color: #303133  !important;
}
</style>
